<script setup>
import {useRouter} from "vue-router";
const router = useRouter()
const inStockFn = () => {
  router.push('/inStock')
}
const outStockFn = () => {
  router.push('/outStock')
}
const ProductLibraryFn = () => {
  router.push('/ProductLibrary')
}
</script>

<template>
  <div class="w-full h-[160px] mt-[10px]">
    <van-row gutter="10" type="flex" justify="space-around" align="center">
      <van-col span="10">
        <div class="h-[160px] bg-[#f8f7fc] rounded-lg">
          <div class="p-[15px] box-border">
            <div class="font-bold text-1xl">产品管理</div>
            <div class="text-[#4B79A9] text-[12px]">今日出库100件</div>
          </div>
          <div class="w-full h-[90px]">
            <img class="w-full h-full" src="@/assets/product.png" alt="">
          </div>
        </div>
      </van-col>
      <van-col span="14">
        <div class="h-[160px] flex flex-col justify-between item-center">
          <div class="w-full h-[90px] flex justify-between item-center">
            <div @click="inStockFn" class="bg-[#fffaf3] flex flex-col justify-around items-center text-center rounded-lg w-[90px] h-[90px]">
              <div class="text-[#DA9318] text-[14px]">入库</div>
              <img src="@/assets/img.png" alt="" class="w-[58px] h-[58px]">
            </div>
            <div @click="outStockFn" class="bg-[#f8f5ff] flex flex-col justify-around items-center text-center rounded-lg w-[90px] h-[90px]">
              <div class="text-[#DA9318] text-[14px]">出库</div>
              <img src="@/assets/out.png" alt="" class="w-[58px] h-[58px]">
            </div>
          </div>
          <div @click="ProductLibraryFn" class="bg-[#fff6f6] rounded-lg w-full h-[60px] flex justify-around items-center">
            <img src="@/assets/goods.png" alt="" class="w-[87px]">
            <div class="text-[#AC4838] text-[14px]">产品库</div>
          </div>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<style scoped>

</style>